<template>
  <div id="app" ref="echart" class="TwoWayBar" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'TwoWayBar',
  data() {
    return {}
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    data:{
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    data:{
      handler(val){
        this.getEchart(val);
      },
      deep:true
    }
  },

  mounted() {},

  methods: {
    getEchart(data) {
      let mychartIndoor;
      let el = this.$refs.echart;
      if(this.$echarts.getInstanceByDom(el)) {
        mychartIndoor = this.$echarts.getInstanceByDom(el)
      }
      else{
        mychartIndoor = this.$echarts.init(el)
      }
      let dataIndoor = data;
      // let dataIndoor = {
      //   male: {
      //     name: '男孩',
      //     data: [
      //       {
      //         value: 5,
      //         label: '阅读区'
      //       },
      //       {
      //         value: 19,
      //         label: '益智区'
      //       },
      //       {
      //         value: 23,
      //         label: '语言区'
      //       },
      //       {
      //         value: 43,
      //         label: '科学区'
      //       },
      //       {
      //         value: 34,
      //         label: '感官操作区'
      //       },
      //       {
      //         value: 53,
      //         label: '沙水区'
      //       },
      //       {
      //         value: 12,
      //         label: '运动区'
      //       }
      //     ]
      //   },
      //   female: {
      //     name: '女孩',
      //     data: [
      //       {
      //         value: 5,
      //         label: '阅读区'
      //       },
      //       {
      //         value: 12,
      //         label: '益智区'
      //       },
      //       {
      //         value: 10,
      //         label: '语言区'
      //       },
      //       {
      //         value: 7,
      //         label: '科学区'
      //       },
      //       {
      //         value: 32,
      //         label: '感官操作区'
      //       },
      //       {
      //         value: 40,
      //         label: '沙水区'
      //       },
      //       {
      //         value: 28,
      //         label: '运动区'
      //       }
      //     ]
      //   }
      // }
      let yAxisData = new Set()
      let legendData = []
      _.forEach(dataIndoor, d => {
        legendData.push(d.name)
        _.forEach(d.data, item => {

          yAxisData.add(item.label)
        })
      })
      let topIndoor = 60
      let bottomIndoor = 60
      yAxisData = [...yAxisData]
      let optionIndoor = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter: function(params){
            var relVal = params[0].name;
            relVal += '<br/>' + params[0].marker+params[0].seriesName+'：' + params[0].value + "人" + '<br/>' + '欢迎度：' + params[0].data.scale + "%"
            return relVal;
          },
        },
        legend: {
          left: 'center',
          top: 0,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#262C41',
            fontSize: 14
          },
          data: legendData
        },
        grid: [
          {
            left: '5%',
            top: '12%',
            width: '36%',
            containLabel: true,
            bottom: 0
            //bottomIndoor
          },
          {
            top: '12%',
            left: '52%',
            width: '0%',
            bottom: 16
            //bottom: bottomIndoor + 16
          },
          {
            top: '12%',
            right: '5%',
            width: '36%',
            containLabel: true,
            bottom: 0
            //bottomIndoor
          }
        ].map(item =>
          _.merge(
            {
              topIndoor
            },
            item
          )
        ),
        xAxis: [
          {
            type: 'value',
            inverse: true,
            axisLabel: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                show: 'false',
                type: 'dashed',
                color: '#DDD'
              }
            }
          },
          {
            gridIndex: 1,
            show: true
          },
          {
            gridIndex: 2,
            type: 'value',
            axisLabel: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true
            }
          }
        ].map(item =>
          _.merge(item, {
            axisLabel: {
              color: '#999',
              margin: 4
            },
            splitLine: {
              lineStyle: {
                color: '#ddd',
                type: 'dashed'
              }
            }
          })
        ),
        yAxis: [
          {
            position: 'right',
            axisLabel: {
              show: false
            },
            axisLine: {
              show: true
            }
          },
          {
            gridIndex: 1,
            position: 'center',
            axisLabel: {
              align: 'center',
              padding: [8, 12, 0, 12],
              fontSize: 12,
              color: `#262C41`
            },
            axisLine: {
              show: false
            }
          },
          {
            gridIndex: 2,
            position: 'left',
            axisLabel: {
              show: false
            },
            axisLine: {
              show: true
            }
          }
        ].map(item => {
          return _.merge(item, {
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: '#E0E0E0'
              }
            },
            axisTick: {
              show: false
            },
            data: yAxisData
          })
        }),
        series: [
          {
            name: _.get(dataIndoor, 'male.name'),
            label: {
              position: 'left'
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#10A7DB'
                  },
                  {
                    offset: 1,
                    color: '#41E1D4'
                  }
                ])
              }
            },
            data: _.map(_.get(dataIndoor, 'male.data'), d => {return {value:d.value,scale:d.scale}})
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: _.get(dataIndoor, 'female.name'),
            label: {
              position: 'right'
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#FE9C5A'
                  },
                  {
                    offset: 1,
                    color: '#EB3B5A'
                  }
                ])
              }
            },
            data: _.map(_.get(dataIndoor, 'female.data'), d =>  {return {value:d.value,scale:d.scale}})
          }
        ].map(item =>
          _.merge(item, {
            type: 'bar',
            barWidth: 10,
            label: {
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 12,
              distance: 10
            }
          })
        )
      }
      mychartIndoor.setOption(optionIndoor);
      window.addEventListener("resize", ()=>{
        mychartIndoor && mychartIndoor.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
